<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>fruit</title>
    <meta name="description" content="">
    <meta name="author" content="Chen Peng">
    <link rel="stylesheet" href="css/stylesheet.css">
    <link rel="stylesheet" href="uikit/css/uikit.min.css">
</head>
<body>
<div class="uk-panel uk-panel-box uk-width-2-5 uk-container-center uk-vertical-align uk-margin-large-top" id="main-panel">
<form name="fruitForm" class="uk-form uk-form-horizontal uk-vertical-align-middle uk-container uk-container-center uk-width-1-1" action="fruit.php" onsubmit="return validateForm()" method="POST">
    <fieldset>
        <legend>User Information</legend>
        <div class="uk-form-row">
            <label class="uk-form-label" for="username">name</label>
            <input class="username uk-form-width-medium" id="username" name="username" type="text"></input>
        </div>
    </fieldset>

    <fieldset class="uk-margin-medium-top">
        <legend>Fruit</legend>
        <div class="uk-form-row">
            <label class="uk-form-label" for="apples">apples</label>
            <input class="fruit-quan uk-form-width-small" id="apples" name="apples" type="number" onchange="validate(this.value); updateTotal();"></input>
        </div>
        <div class="uk-form-row uk-margin-small-top">
            <label class="uk-form-label" for="oranges">oranges</label>
            <input class="fruit-quan uk-form-width-small" id="oranges" name="oranges" type="number" onchange="validate(this.value); updateTotal();"></input>
        </div>
        <div class="uk-form-row uk-margin-small-top">
            <label class="uk-form-label" for="bananas">bananas</label>
            <input class="fruit-quan uk-form-width-small" id="bananas" name="bananas" type="number" onchange="validate(this.value); updateTotal();"></input>
        </div>
        <div class="uk-form-row uk-margin-medium-top">
            <label class="uk-form-label" for="total">total (S$)</label>
            <input class="uk-form-width-small" id="total" name="total" type="number" onfocus="blur(this)"></input>
        </div>
    </fieldset>

    <fieldset class="uk-margin-medium-top ">
        <legend>Payment Method</legend>
        <div class="uk-rom-row"><input name="payment" type="radio" value="Visa">Visa</input></div>
        <div class="uk-rom-row"><input name="payment" type="radio" value="MasterCard">MasterCard</input></div>
        <div class="uk-rom-row"><input name="payment" type="radio" value="Discover">Discover</input></div>
    </fieldset>
    
    <button class="uk-button uk-button-primary uk-margin-medium-top uk-width-1-1" type="submit">Submit</button>
</form>
</div>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="uikit/js/uikit.min.js"></script>
</body>
</html>

